@import './reset.scss'; //清除默认样式
@import './variables.scss'; //主色调
@import './icon.scss'; //图标

@for $n from 1 through 50{
    .l#{$n}{left:(1px * $n) !important;}
    .t#{$n}{top:(1px * $n) !important;}
    .r#{$n}{right:(1px * $n) !important;}
    .b#{$n}{bottom:(1px * $n) !important;}
    .mt#{$n}{margin-top:(1px * $n) !important;}
    .ml#{$n}{margin-left:(1px * $n) !important;}
    .mr#{$n}{margin-right:(1px * $n) !important;}
    .mb#{$n}{margin-bottom:(1px * $n) !important;}
    .pt#{$n}{padding-top:(1px * $n) !important;}
    .pl#{$n}{padding-left:(1px * $n) !important;}
    .pr#{$n}{padding-right:(1px * $n) !important;}
    .pb#{$n}{padding-bottom:(1px * $n) !important;}
    .w#{$n}{width:(10px * $n) !important;}
    .h#{$n}{height:(10px * $n) !important;}
    .lh#{$n}{line-height:(1px * $n) !important;}
    @if $n > 12 and $n < 40{
      .ft#{$n}{font-size:(1px * $n) !important;}
    }
    @if $n > 1 and $n < 6{
      .ellipsis#{$n}{
        display: -webkit-box;
        word-break: break-all;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: $n;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    @if $n < 10{
      .ls#{$n}{ letter-spacing: (1px * $n) !important; }
      .fw#{$n}{ font-weight: (100 * $n) !important; }
    }

}


// 公共字体颜色
.fc-fff{
  color:$c-fff;
}
.fc-black{ //黑色
	color:$c-black;
}
.fc-black1{ //黑色
	color:$c-black1;
}
.fc-orange{ //橙色
	color:$c-orange;
}
.fc-gray{ //灰色
	color:$c-gray;
}
.fc-blue{ //蓝色
	color:$c-blue;
}
//遮罩样式
//全局遮罩
.main-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: rgba(0, 0, 0, .5);
}

//其它样式
.pointer{ //手势
	cursor: pointer;
}
//强制换行
.word_wrap{
  word-wrap:break-word
}
//超出隐藏
.over{
  overflow:hidden;
}
//禁止文本选中
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently not supported by any browser */
}
//布局样式
//文字居中
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}
.text-left{
  text-align: left;
}
.flex{
  display: flex;
  &.flex-space-between{
    justify-content: space-between;
  }
}

//样式行对其
.align-row-center {
  display: flex;
  align-items: center;
}

//样式据左右
.space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


//placeholder颜色
input::-webkit-input-placeholder{
  color:#b3c0c9;
}
input::-moz-placeholder{   /* Mozilla Firefox 19+ */
  color:#b3c0c9;
}
input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
  color:#b3c0c9;
}
input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
  color:#b3c0c9;
}
  //单行省略号
  .ellipsis {
    width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  //竖向滚动条
  .scrollbar-y{
    &::-webkit-scrollbar {
      width: 4px;
      background-color: #f2f6f9;
    }
    &::-webkit-scrollbar-corner, /* 滚动条角落 */
    &::-webkit-scrollbar-thumb,
    &::-webkit-scrollbar-track {
      border-radius: 2px;
    }
    &::-webkit-scrollbar-corner,
    &::-webkit-scrollbar-track {
      /* 滚动条轨道 */
      background-color: rgba(180, 160, 120, 0.1);
      box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
    }
    &::-webkit-scrollbar-thumb {
      /* 滚动条手柄 */
      background-color: #d5dee7;
    }
  }
  //横向滚动条
.scrollbar-x{
  &::-webkit-scrollbar {
    height: 6px;
    background-color: #f2f6f9;
  }
  &::-webkit-scrollbar-corner, /* 滚动条角落 */
  &::-webkit-scrollbar-thumb,
  &::-webkit-scrollbar-track {
    border-radius: 3px;
  }
  &::-webkit-scrollbar-corner,
  &::-webkit-scrollbar-track {
    /* 滚动条轨道 */
    background-color: rgba(180, 160, 120, 0.1);
    box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
  }
  &::-webkit-scrollbar-thumb {
    /* 滚动条手柄 */
    background-color: #d5dee7;
  }
}
///* 弹框动画 */
//.fade-enter-active, .fade-leave-active {
//  transition: opacity .5s;
//}
//
//.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
//{
//  opacity: 0;
//}
//绝对剧居中
.absolute-center{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
//通用缺省页
.default-page{
  text-align: center;
  margin-top: 80px;
  img{
    display: inline-block;
  }
  p{
    font-size: 14px;
    color: #96A2AA;
  }
}
.default-page-task{
  text-align: center;
  img{
    display: inline-block;
    width: 50%;
  }
  p{
    font-size: 14px;
    color: #96A2AA;
  }
}
.defaultPage-smart {
  text-align: center;
  font-size: 18px;
  color: #96A2AA;
  position: relative;
  width: 100%;
  height: 100%;
  .box{
    width: 330px;
    height: 312px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    img{
      display: inline-block;
      width: 266px;
    }
    p{
      padding-top: 40px;
    }
  }

}
.ellipsis1{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
